var table ,form ,laypage ,layer ,element ,laydate ,upload//时间组件
var map = new AMap.Map("container", {
	//center:[111.722487,40.797804],
	mapStyle: "amap://styles/d9a4d61b09a20fbf4f9ea53a37a7c11b",
	zoom: 18
});
$(function(){
    layui.use(['table','form','laypage','layer', 'element', 'laydate','upload','laytpl'], function(){
    	table = layui.table;
        form=layui.form;
        laypage = layui.laypage ;//分页
        layer = layui.layer ;//弹层
        element = layui.element; //元素操作
        laydate = layui.laydate; //时间组件 
        upload = layui.upload;
        laytpl = layui.laytpl;
        mapfun();//地图社区区域	
        statisticsAge("equmentmsg");///*设备信息*/
        statisticsQushi("arightboxbott");//趋势信息
        tabledata();//统计报表
        statisticsDyDl();//设备监控
        statisticsbott();//运维统计
        statisticspolice()//报警信息
        statisticsweektime()//一周统计信息
              
        //全屏
        var a = 0;
		$('#fullscreen').on('click', function () {
			a++;
			a % 2 == 1 ? enterfullscreen() : exitfullscreen();
		});
        
    });
});
//设备信息	 
function statisticsAge(model){
	var myChart = echarts.init(document.getElementById(model));
	// 指定图表的配置项和数据
	var option = {
	    tooltip: {
	        trigger: 'item',
	        formatter: "{d}%"
	    },
	    color: ['#ee6fa2', '#facc9b', '#94d0ae', '#5a7cde', '#79c4eb'],		
	    series: [
	    	{
	            name: '',
	            type: 'pie',
	            selectedMode: 'single',
	            radius: [0, '18%'],
	            center: ['50%', '51%'],
	            label: {
	                position: 'inner',
	                normal: {
			        	color:"#ee6666"
		            },
	            },
	            tooltip : {  
	            	show: false,
		        },
	            labelLine: {
	                show: false,
	               
	            },
	            data: [
	                {value:18, name: ''},
	            ]
	      },
	      {
	        name: '',
	        type: 'pie',
	        radius: ['35%', '65%'], // 半径
	        center: ['50%', '51%'], // 位置
	        label: {
	            normal: {
	            	formatter: "{c}%",
	            	textStyle:{
		        		color:'#00ffff'
		        	}
	            },
	        },
	        data: [{
	                value: 44,
	                name: ''
	            },
	            {
	                value: 48,
	                name: ''
	            },
	            {
	                value: 51,
	                name: ''
	            },
	            {
	                value: 36,
	                name: ''
	            },
	            {
	                value: 10,
	                name: ''
	            }
	        ],
	        itemStyle: {
	            emphasis: {
	                shadowBlur: 10,
	                shadowOffsetX: 0,
	                shadowColor: 'rgba(0, 0, 0, 0.5)'
	            }
	        }
	    }]
	};
	// 使用刚指定的配置项和数据显示图表。
	myChart.setOption(option,true);
    setInterval(function(){
    	myChart.clear();
    	myChart.setOption(option,true);
    },5000);
}
//趋势信息
function statisticsQushi(model){
	var myChart2 = echarts.init(document.getElementById(model));
	var option = {
		title: {
			top: 5,
			left: 20,
			textStyle: {
				fontSize: 14,
				color: 'rgba(27,220,239,1)'
			},
			text: '功能：KW'
		},
		color: [],
		grid: {
			left: 40,
			right: 40,
			top: 50,
			bottom: 40
		},
		xAxis: {
			type: 'category',
			boundaryGap: false,
	        splitLine:{ //网格线
	          show:true,
	          lineStyle: {
					color: 'rgba(6,73,160,.6)'
				}
	        },
	        axisLabel: { //x坐标文字样式
	        	color: "rgba(0,168,233,1)"
	        },
	        axisLine: {//X轴样式
				show:true,
				lineStyle: {
					color: 'rgba(6,73,160,1)'
				}
			},
			data: ['8:00', '9:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00']
		},
		yAxis: {
			type: 'value',
			axisLine: {
				show:true,
				lineStyle: {
					color: 'rgba(6,73,160,1)'
				}
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(6,73,160,.6)'
				}
			},
			axisLabel: {
				color: "rgba(0,168,233,1)"
			},
		},
		series: [{
				name: '',
				type: 'line',
		        showSymbol: false,
				stack: '',
				areaStyle: {
	                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
	                    offset: 0,
	                    color: 'rgba(0,168,233,.9)'
	                }, {
	                    offset: 1,
	                    color: 'rgba(5,72,163,.2)'
	                }])
	            },
				data: [500, 600, 700, 800, 900, 1000, 800, 900, 1000]
			}

		]
	};
	myChart2.setOption(option,true);
    setInterval(function(){
    	myChart2.clear();
    	myChart2.setOption(option,true);
    },5500);
}
function tabledata(){
	/*table.render({
	    elem: '#tabledata'
	    ,height: 312
	    ,url: '/demo/table/user/' //数据接口
	    ,page: true //开启分页
	    ,cols: [[ //表头
	      {field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
	      ,{field: 'username', title: '用户名', width:80}
	      ,{field: 'sex', title: '性别', width:80, sort: true}
	      ,{field: 'city', title: '城市', width:80} 
	      ,{field: 'sign', title: '签名', width: 177}
	      ,{field: 'experience', title: '积分', width: 80, sort: true}
	      ,{field: 'score', title: '评分', width: 80, sort: true}
	      ,{field: 'classify', title: '职业', width: 80}
	      ,{field: 'wealth', title: '财富', width: 135, sort: true}
	    ]]
	  });*/
}
//设备监控
function statisticsDyDl(){
	 var myChart3 = echarts.init(document.getElementById('prbottom_box2'));
	   var option = {
				//backgroundColor: 'rgba(1,202,217,.2)',
			   grid: {
					left: 50,
					right: 30,
					top: 20,
					bottom: 30
				},
				tooltip : {
				         trigger: 'axis', //触发类型,'item'图形，散点图，饼图等无类目轴的图表中。 'axis'柱状图，折线图等。
				         triggerOn:"mousemove",  //提示框触发的条件
				         showContent:true,//是否显示提示框浮层
				         //formatter: "{b} : {c}人"
				},
			    xAxis: {
					type: 'category',
					boundaryGap: false,
					boundaryGap:true,
			        splitLine:{ //网格线
			          show:true,
			          lineStyle: {
							color: 'rgba(6,73,160,.6)'
						}
			        },
			        axisLabel: { //x坐标文字样式
			        	color: "rgba(0,168,233,1)"
			        },
			        axisLine: {//X轴样式
						show:true,
						lineStyle: {
							color: 'rgba(6,73,160,1)'
						}
					},
					data:['2012', '2014', '2016', '2018', '2020', '2021']
				},
				yAxis: {
					type: 'value',
					axisLine: {
						show:true,
						lineStyle: {
							color: 'rgba(6,73,160,1)'
						}
					},
					splitLine: {
						lineStyle: {
							color: 'rgba(6,73,160,.6)'
						}
					},
					axisLabel: {
						color: "rgba(0,168,233,1)"
					},
				},
			    series: [{
			        data: ["600","500","300","800","900","300"],
			        barWidth : 20,//柱图宽度
			        type: 'bar',
				    itemStyle: {
				    	normal: {
							color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
								offset: 0,
								color: "#f81a27" // 0% 处的颜色
							}, {
								offset: 0.6,
								color: "#fc494c" // 60% 处的颜色
							}, {
								offset: 1,
								color: "#ff8d83" // 100% 处的颜色
							}], false)
						}
	                }
			    }]                    
			};
	       myChart3.setOption(option,true);
	       setInterval(function(){
	       	myChart3.clear();
	       	myChart3.setOption(option,true);
	       },7000);
}
//运维统计
function statisticsbott(){
	var myChart4 = echarts.init(document.getElementById('pleftbox2bott_cont'));
	var option = {
		color: ['#7ecef4'],
		//backgroundColor: 'rgba(1,202,217,.2)',
		grid: {
			left: 40,
			right: 20,
			top: 30,
			bottom: 0,
			containLabel: true
		},
       
		xAxis: {
			type: 'value',
			axisLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0)'
				}
			},
			splitLine: {
				lineStyle: {
					color: 'rgba(255,255,255,0)'
				}
			},
			axisLabel: { //x坐标文字样式
				show:false,
	        	color: "rgba(0,168,233,1)"
	        },
			boundaryGap: [0, 0.01]
		},
		yAxis: {
			type: 'category',
			axisLine: {show:false},
            axisTick: {show:false},
            splitLine:{show:false},
			axisLabel: {
				color: "rgba(255,255,255,1)"
			},
			data: ['巷道修复机/WPZ-37-/600', '启动器/PM-601', '巷道修复机/WPZ-37-/602', '启动器/PM-601', '巷道修复机/WPZ-37-/603']
		},
		tooltip : {
         trigger: 'axis', //触发类型,'item'图形，散点图，饼图等无类目轴的图表中。 'axis'柱状图，折线图等。
         triggerOn:"mousemove",  //提示框触发的条件
         showContent:true,//是否显示提示框浮层
//        formatter: "{b} : {c}%"
      },
		series: [{
			name: '',
			type: 'bar',
			barWidth: 15,
			itemStyle: {
				normal: {
					color: new echarts.graphic.LinearGradient(
						1, 0, 0, 1, [{
								offset: 0,
								color: 'rgba(10,235,253,1)'
							},
							{
								offset: 0.6,
								color: 'rgba(16,191,255,.7)'
							}, 
							{
								offset: 1,								
								color: 'rgba(25,157,255,.8)'
							}
						]
					),
					//柱形图圆角，初始化效果
                    barBorderRadius:[15, 15, 15, 15]
				}
			},
			data: [5, 16, 20, 14, 24]
		}]
	};
	myChart4.setOption(option,true);
    setInterval(function(){
    	myChart4.clear();
    	myChart4.setOption(option,true);
    },8000);
}
//报警统计
function statisticspolice(){
	var myChart5 = echarts.init(document.getElementById("call_police"));
	var option5 = {
			title: {
		        text: '风险等级1',
		        x:'center',
                y:'80%',
                textAlign:'left',
	            textStyle:{
	                color:'#1bdcef',
	        　　　　                fontSize:16
	            }
		    },
		    grid: {},
			color: ['#209cfe'],	
		    series: [{
		        type: 'gauge',
		        startAngle: 90,
		        endAngle: -270,
		        pointer: {
		            show: false
		        },
		        progress: {
		            show: true,
		            overlap: false,
		            roundCap: true,
		            clip: false,
		            itemStyle: {
		                backgroundColor: '#1392f1'
		            }
		        },
		        axisLine: {
		            lineStyle: {
		                width: 10,
		               // color:'#00bae9'		               
		            }
		        },
		        splitLine: {
		            show: false,
		            distance: 0,
		            length: 10
		        },
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            show: false,
		            distance: 50
		        },
		        data: [{
		            value: 39.79,
		           // name: 'Perfect',		           
		        }
		        ],
		        title: {
		            fontSize: 14
		        },
		        detail: {
		            width: 50,
		            height: 14,
		            fontSize: 14,
		            color: '#fff',
		            /*borderColor: 'auto',
		            borderRadius: 20,
		            borderWidth: 1,*/
		            offsetCenter: ['0%', '0%'],
		            formatter: '{value}%'
		        }
		    }]
		};
	myChart5.setOption(option5,true);
    setInterval(function(){
    	myChart5.clear();
    	myChart5.setOption(option5,true);
    },5200);
	//等级2

	var myChart6 = echarts.init(document.getElementById("call_police2"));
	var option6 = {
			title: {
		        text: '风险等级2',
		        x:'center',
                y:'80%',
                textAlign:'left',
	            textStyle:{
	                color:'#1bdcef',
	        　　　　                fontSize:16
	            }
		    },
		    grid: {},
			color: ['#eeac4c'],	
		    series: [{
		        type: 'gauge',
		        startAngle: 90,
		        endAngle: -270,
		        pointer: {
		            show: false
		        },
		        progress: {
		            show: true,
		            overlap: false,
		            roundCap: true,
		            clip: false,
		            itemStyle: {
		                backgroundColor: '#1392f1'
		            }
		        },
		        axisLine: {
		            lineStyle: {
		                width: 10
		            }
		        },
		        splitLine: {
		            show: false,
		            distance: 0,
		            length: 10
		        },
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            show: false,
		            distance: 50
		        },
		        data: [{
		            value: 29.2,
		           // name: 'Perfect',
		        }
		        ],
		        title: {
		            fontSize: 14
		        },
		        detail: {
		            width: 50,
		            height: 14,
		            fontSize: 14,
		            color: '#fff',
		            /*borderColor: 'auto',
		            borderRadius: 20,
		            borderWidth: 1,*/
		            offsetCenter: ['0%', '0%'],
		            formatter: '{value}%'
		        }
		    }]
		};
	myChart6.setOption(option6,true);
    setInterval(function(){
    	myChart6.clear();
    	myChart6.setOption(option6,true);
    },5500);
	//等级3

	var myChart7 = echarts.init(document.getElementById("call_police3"));
	var option3 = {
			title: {
		        text: '风险等级3',
		        x:'center',
                y:'80%',
                textAlign:'left',
	            textStyle:{
	                color:'#1bdcef',
	        　　　　                fontSize:16
	            }
		    },
		    grid: {},
			color: ['#9c3747'],	
		    series: [{
		        type: 'gauge',
		        startAngle: 90,
		        endAngle: -270,
		        pointer: {
		            show: false
		        },
		        progress: {
		            show: true,
		            overlap: false,
		            roundCap: true,
		            clip: false,
		            itemStyle: {
		                backgroundColor: '#1392f1'
		            }
		        },
		        axisLine: {
		            lineStyle: {
		                width: 10
		            }
		        },
		        splitLine: {
		            show: false,
		            distance: 0,
		            length: 10
		        },
		        axisTick: {
		            show: false
		        },
		        axisLabel: {
		            show: false,
		            distance: 50
		        },
		        data: [{
		            value: 9.6,
		           // name: 'Perfect',
		        }
		        ],
		        title: {
		            fontSize: 14
		        },
		        detail: {
		            width: 50,
		            height: 14,
		            fontSize: 14,
		            color: '#fff',
		            /*borderColor: 'auto',
		            borderRadius: 20,
		            borderWidth: 1,*/
		            offsetCenter: ['0%', '0%'],
		            formatter: '{value}%'
		        }
		    }]
		};
	myChart7.setOption(option3,true);
    setInterval(function(){
    	myChart7.clear();
    	myChart7.setOption(option3,true);
    },5800);


}
//地图区域
function mapfun(){

}
//一周统计情况
function statisticsweektime(){
	var myChart8 = echarts.init(document.getElementById("weettime"));
	var option = {
		    title: {
		        text: '近一周故障统计',
		        top: 5,
				left: 20,
				textStyle: {
					fontSize: 14,
					color: 'rgba(27,220,239,1)'
				},
		    },
		    tooltip: {
		        trigger: 'axis',
		        axisPointer: {
		            type: 'cross',
		            label: {
		                backgroundColor: '#6a7985'
		            }
		        }
		    },
		    legend: {
		        //data: ['邮件营销', '联盟广告', '视频广告', '直接访问', '搜索引擎']
		    },
		    grid: {
		        left: '3%',
		        right: '4%',
		        bottom: '3%',
		        containLabel: true
		    },
		    xAxis:{
			    	axisLine: {
		                show:true,
						lineStyle: {
							color: 'rgba(0,168,233,1)'
						}
					},
					splitLine: {
					    show:false,
					},
					axisLabel: { //x坐标文字样式
						show:true,
			        	color: "rgba(0,168,233,1)"
			        },
		            type: 'category',
		            boundaryGap: false,
		            data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
		        }
		    ,
		    yAxis: {
		            axisLine: {
		                show:true,
						lineStyle: {
							color: 'rgba(0,168,233,1)'
						}
					},
					splitLine: {
					    show:false,
					},
					axisLabel: { //x坐标文字样式
						show:true,
			        	color: "rgba(0,168,233,1)"
			        },
		    },
		    series: [
		        {
		            name: '',
		            type: 'line',
		            stack: '总量',
		            areaStyle: {},
		            emphasis: {
		                focus: 'series'
		            },
		           symbol: 'none',   //这个配置
		            data: [1, 2, 3, 4, 3, 2, 2]
		        },
		        {
		            name: '',
		            type: 'line',
		            stack: '总量',
		            areaStyle: {},
		             symbol: 'none',   //这个配置
		            emphasis: {
		                focus: 'series'
		            },
		            data: [2, 2, 9, 4, 2, 3, 3]
		        },
		        {
		            name: '',
		            type: 'line',
		            stack: '总量',
		            areaStyle: {},
		            symbol: 'none',   //这个配置
		            emphasis: {
		                focus: 'series'
		            },
		            data: [3, 3, 2, 4, 3, 3, 4]
		        },
		        {
		            name: '',
		            type: 'line',
		            stack: '总量',
		            areaStyle: {},
		           symbol: 'none',   //这个配置
		            emphasis: {
		                focus: 'series'
		            },
		            data: [4, 2, 3, 4, 3, 3, 2]
		        },
		        {
		            name: '',
		            type: 'line',
		            stack: '总量',
		            label: {
		                show: true,
		                position: 'top'
		            },
		            symbol: 'none',   //这个配置
		            areaStyle: {},
		            emphasis: {
		                focus: 'series'
		            },
		            data: [4, 2, 2, 4, 2, 3, 2]
		        }
		    ]
		};
	myChart8.setOption(option,true);
    setInterval(function(){
    	myChart8.clear();
    	myChart8.setOption(option,true);
    },10000);

}
//控制全屏
function enterfullscreen() { //进入全屏
	$("#fullscreen").html("<i class='layui-icon'>&#xe758;</i>退出全屏");
	var docElm = document.documentElement;
	var elm = document.getElementById('Main');
	//W3C
	if (docElm.requestFullscreen) {
		docElm.requestFullscreen();
	}
	//FireFox
	else if (docElm.mozRequestFullScreen) {
		docElm.mozRequestFullScreen();
	}
	//Chrome等
	else if (docElm.webkitRequestFullScreen) {
		docElm.webkitRequestFullScreen();
	}
	//IE11
	else if (elm.msRequestFullscreen) {
		elm.msRequestFullscreen();
	}
}

function exitfullscreen() { //退出全屏
	$("#fullscreen").html("切换全屏");
	if (document.exitFullscreen) {
		document.exitFullscreen();
	} else if (document.mozCancelFullScreen) {
		document.mozCancelFullScreen();
	} else if (document.webkitCancelFullScreen) {
		document.webkitCancelFullScreen();
	} else if (document.msExitFullscreen) {
		document.msExitFullscreen();
	}
}